<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>商品列表</title>

    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
          rel="stylesheet">
    <!-- Morris -->
    <link href="../../resource/hotui/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/hotui/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>
    <link rel="stylesheet" href="../../resource/lib/zupload/control/css/zyUpload.css"
          th:href="@{/resource/lib/zupload/control/css/zyUpload.css}" type="text/css">
    <style>

        #edit_form button {
            padding: 4px 12px;
        }

        .hr-line-dashed {
            margin: 15px 0;
        }

        .specPanel .input-sm {
            height: 20px;
        }

        .img-panel img {
            margin-top: 10px;
            width: 150px;
            height: 150px;
        }
    </style>
</head>

<body>
<div class="wrapper wrapper-content  fadeInRight tooltip-demo">
    <form role="form" id="edit_form" th:object="${po}">
        <input type="hidden" id="hdProductId" th:value="${po.id==null?0:po.id}"/>
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content" style="border-top: none;">
                        <div class="panel-body form-horizontal">
                            <div class="form-group ">
                                <label class="col-sm-2 control-label">标题:</label>

                                <div class="col-sm-10">
                                    <input th:value="*{title}" required id="title" name="title" type="text"
                                           class="form-control input-sm"
                                           placeholder="标题"/>
                                </div>
                            </div>
                            <div class="hr-line-dashed "></div>
                            <div class="form-group ">
                                <label class="col-sm-2 control-label">描述:</label>

                                <div class="col-sm-10">
                                    <input type="text" id="desc" name="desc" required th:value="*{desc}"
                                           class="form-control input-sm" placeholder="描述"/>
                                </div>
                            </div>
                            <div class="hr-line-dashed "></div>
                            <div class="form-group img-panel">
                                <label class="col-sm-2 control-label">商品主图</label>
                                <div class="col-sm-10 form-inline">
                                    <input type="file" style="display: none;" id="uploadfile" name="img"
                                           readonly="readonly"
                                           class="form-control file">
                                    <div>
                                        <span id="imgContent">
                                            <img th:each="item,index:*{imageArray()}"
                                                 th:src="${@resourceService.get(item).getURI()}" id="img0"
                                                 th:id="${item+index}" onclick="imgHandler.changeImg(this)"
                                                 src="../../resource/img/a1.jpg"/>
                                        </span>
                                        <img class="imgPreview" src="../../resource/img/bg.png"
                                             onclick="imgHandler.addImg()"
                                             th:src="@{/resource/img/bg.png}"/>
                                    </div>
                                    <br><br>
                                    <a href="javascript:imgHandler.uploadModalShow()">批量上传</a>
                                </div>
                            </div>
                            <div class="hr-line-dashed "></div>
                            <div class="form-group ">
                                <label class="col-sm-2 control-label">市场价:</label>

                                <div class="col-sm-10">
                                    <input type="text" id="price" name="price" th:value="*{price}" required
                                           class="form-control input-sm input-s only-float"
                                           placeholder="市场价"/>
                                </div>
                            </div>
                            <div class="hr-line-dashed "></div>
                            <div class="form-group ">
                                <label class="col-sm-2 control-label">所需积分:</label>

                                <div class="col-sm-10">
                                    <input type="text" id="integral" name="integral"
                                           th:value="${po.integral==0?'':po.integral}"
                                           required
                                           class="form-control input-sm input-s only-num"
                                           placeholder="所需积分"/>
                                </div>
                            </div>
                            <div class="hr-line-dashed "></div>
                            <div class="form-group ">
                                <label class="col-sm-2 control-label">库存:</label>

                                <div class="col-sm-10">
                                    <input type="text" id="store" name="store"
                                           th:value="*{store}"
                                           required th:if="${po.id==null}"
                                           class="form-control input-sm input-s only-num"
                                           placeholder="库存"/>
                                    <input type="text" id="store" name="store"
                                           th:value="*{store}" readonly
                                           th:if="${po.id>0}"
                                           class="form-control input-sm input-s only-num"
                                           placeholder="库存"/>
                                </div>
                            </div>
                            <div class="hr-line-dashed "></div>
                            <div class="form-group form-inline">
                                <label class="col-sm-2 control-label">限购数量:</label>

                                <div class="col-sm-10">
                                    <input type="text" id="limitExchange" name="limitExchange" value="0"
                                           th:value="*{limitExchange}"
                                           required
                                           class="form-control input-sm input-s only-num"
                                           placeholder="限购数量"/>
                                    <p class="form-control-static">0表示不限购</p>
                                </div>
                            </div>
                            <!--                            <div class="hr-line-dashed "></div>-->
                            <!--                            <div class="form-group ">-->
                            <!--                                <label class="col-sm-2 control-label">尺寸:</label>-->

                            <!--                                <div class="col-sm-10">-->
                            <!--                                    <input type="text" id="propSize" th:value="*{propSize}" required-->
                            <!--                                           class="form-control input-sm input-s"-->
                            <!--                                           placeholder="尺寸"/>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <!--                            <div class="hr-line-dashed "></div>-->
                            <!--                            <div class="form-group ">-->
                            <!--                                <label class="col-sm-2 control-label">材质:</label>-->

                            <!--                                <div class="col-sm-10">-->
                            <!--                                    <input type="text" id="propMaterial" th:value="*{propMaterial}" required-->
                            <!--                                           class="form-control input-sm input-s"-->
                            <!--                                           placeholder="材质"/>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <!--                            <div class="hr-line-dashed "></div>-->
                            <!--                            <div class="form-group ">-->
                            <!--                                <label class="col-sm-2 control-label">产地:</label>-->

                            <!--                                <div class="col-sm-10">-->
                            <!--                                    <input type="text" id="location" th:value="*{location}" required-->
                            <!--                                           class="form-control input-sm input-s"-->
                            <!--                                           placeholder="产地"/>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <!--                            <div class="hr-line-dashed "></div>-->
                            <!--                            <div class="form-group form-inline">-->
                            <!--                                <label class="col-sm-2 control-label">重量:</label>-->

                            <!--                                <div class="col-sm-10">-->
                            <!--                                    <input type="text" id="weight" th:value="*{weight}" required-->
                            <!--                                           class="form-control input-sm input-s only-float"-->
                            <!--                                           placeholder="重量"/>-->
                            <!--                                    <select class="form-control" id="weightUnit" name="weightUnit">-->
                            <!--                                        <option value="G" th:selected="*{weightUnit}=='G'">G</option>-->
                            <!--                                        <option value="KG" th:selected="*{weightUnit}=='KG'">KG</option>-->
                            <!--                                    </select>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <div class="form-group">
                                <div style="text-align: center">
                                    <button class="btn btn-success btn-submit" type="button"
                                            onclick="productHandler.save(0)">
                                        保存
                                    </button>
                                    <button class="btn btn-primary btn-submit" type="button" style="margin-left: 10px;"
                                            onclick="productHandler.save(1)">
                                        保存并上架
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script type="text/html" id="upload_modal">
    <div id="T_upload"></div>
    <input type="hidden" id="upload_files"/>
</script>

<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js(123123)}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js}"></script>

<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>
<script src="../../resource/hotui/js/plugins/ajaxfileupload.js"
        th:src="@{/resource/hotui/js/plugins/ajaxfileupload.js}"></script>
<script src="../../resource/hotui/js/plugins/validate/jquery.validate.min.js"
        th:src="@{/resource/hotui/js/plugins/validate/jquery.validate.min.js}"></script>
<script src="../../resource/hotui/js/plugins/validate/messages_zh.min.js"
        th:src="@{/resource/hotui/js/plugins/validate/messages_zh.min.js}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-validate.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-validate.js}"></script>
<script type="text/javascript" src="../../resource/lib/zupload/core/zyFile.js"
        th:src="@{/resource/lib/zupload/core/zyFile.js}"></script>
<script type="text/javascript" src="../../resource/lib/zupload/control/js/zyUpload.js"
        th:src="@{/resource/lib/zupload/control/js/zyUpload.js}"></script>
<script type="text/javascript" src="../../resource/lib/zupload/control/js/jqueryrotate.js"
        th:src="@{/resource/lib/zupload/control/js/jqueryrotate.js}"></script>
<script type="text/javascript" src="../../resource/lib/zupload/index.js"
        th:src="@{/resource/lib/zupload/index.js}"></script>

<script type="text/javascript" th:inline="javascript">
    const uploadUri = /*[[@{/resource/upload}]]*/  "";
    const apiUri = /*[[@{/integral/product}]]*/  "";
</script>

<script type="text/javascript">
    let index = parent.layer.getFrameIndex(window.name);
    //-1表示新增
    let imgDataId = -1;
    let published = 0;

    let uploadModal = $("#upload_modal").modal("上传图片", function () {
        var self = this;
        let files = $("#upload_files").val();
        files = files.substring(0, files.length - 1);
        let fileArray = files.split(",");
        $.each(fileArray, function (o, item) {
            let size = $("#imgContent img").length;
            let id = "img" + (size + 1);
            $("#imgContent").append('<img src="' + item + '" id="' + id + '" onclick="imgHandler.changeImg(this)"/>');
        });
        uploadModal.hide();
    }, {
        offset: ['100px', '50px']
    });

    $("#edit_form").validateCallback(function () {
        let images = "";
        $("#imgContent img").each(function () {
            images += $(this).attr("src") + ",";
        });
        images = images.substring(0, images.length - 1);
        if (images.length === 0) {
            hot.tip.msg("请至少上传一张商品图片");
            return;
        }

        let requestData = {
            id: $("#hdProductId").val(),
            title: $.trim($("#title").val()),
            desc: $.trim($("#desc").val()),
            images: images,
            price: $.trim($("#price").val()),
            integral: $.trim($("#integral").val()),
            limitExchange: $.trim($("#limitExchange").val()),
            store: $.trim($("#store").val()),
            // propSize: $.trim($("#propSize").val()),
            // propMaterial: $.trim($("#propMaterial").val()),
            // location: $.trim($("#location").val()),
            // weight: $.trim($("#weight").val()),
            // weightUnit: $.trim($("#weightUnit").val()),
            published: published === 1
        };

        hot.ajax(apiUri + "/save", requestData, function (apiResult) {
            if (apiResult.resultCode === 2000) {
                hot.tip.success("保存成功", function () {
                    parent.location.reload();
                    parent.layer.close(index);
                });
            } else {
                hot.tip.error("保存失败--" + apiResult.resultMsg);
            }
        }, function () {
        }, "post", 300);
    });

    $(function () {
        $("body").delegate('.file', 'change', function () {
            hot.fileUpload(uploadUri, $(this).attr('id'), null, function (apiResult) {
                if (imgDataId === "") {
                    let size = $("#imgContent img").length;
                    let id = "img" + (size + 1);
                    //追加
                    $("#imgContent").append('<img src="' + apiResult.data.previewUrl + '" id="' + id + '" onclick="imgHandler.changeImg(this)"/>');
                } else {
                    //覆盖
                    $("#" + imgDataId).attr("src", apiResult.data.previewUrl);
                }
            });
        });
    });

    let productHandler = {
        save: function (index) {
            published = index;
            $("#edit_form").submit();
        }
    };

    let imgHandler = {
        addImg: function () {
            imgDataId = "";
            let $file = $(".file");
            $file.click();
        },
        changeImg: function (obj) {
            let $this = $(obj);
            imgDataId = $this.attr("id");
            let $file = $(".file");
            $file.click();
        },
        uploadModalShow: function () {
            uploadModal.show(function () {
                $("#T_upload").zyUpload({
                    width: "650px",                 // 宽度
                    height: "400px",                 // 宽度
                    itemWidth: "120px",                 // 文件项的宽度
                    itemHeight: "100px",                 // 文件项的高度
                    url: uploadUri,  // 上传文件的路径
                    multiple: true,                    // 是否可以多个文件上传
                    dragDrop: true,                    // 是否可以拖动上传文件
                    del: true,                    // 是否可以删除文件
                    finishDel: false,                   // 是否在上传文件完成后删除预览
                    /* 外部获得的回调接口 */
                    onSelect: function (files, allFiles) {                    // 选择文件的回调方法
                    },
                    onDelete: function (file, surplusFiles) {                     // 删除一个文件的回调方法
                    },
                    onSuccess: function (file, response) {                    // 文件上传成功的回调方法
                        let current = $("#upload_files").val();
                        let path = JSON.parse(response).data.path;
                        current += path + ",";
                        $("#upload_files").val(current);
                    },
                    onFailure: function (file) {                    // 文件上传失败的回调方法
                    },
                    onComplete: function (responseInfo) {           // 上传完成的回调方法
                    }
                });
            })
        }
    };
</script>
</body>

</html>
